/********************************************************************************
 *@description: 敏感词/举报
 *@author: Xhd
 *@API: 陈浩天
 *@date: 2024-03-27 16:52:58
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import { Tabs, Space, Button } from 'antd';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import TheImage from "@/components/TheImage";
import TheButton from "@/components/TheButton";
import { apiSensitiveWordsPage } from "@/request/app/sensitiveWords";
import store from "@/store/store";
import moment from 'moment';
import _ from "lodash";
import WaterMark from "@/components/WaterMark";

class SensitiveWords extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columnsWords: [
        {
          title: "敏感词内容",
          dataIndex: "value",
          key: "value",
          render: (text) => {
            return <div style={{ width: '100%', whiteSpace: "normal" }}>
              {text}
            </div>
          }
        },
        {
          title: "发送方ID",
          dataIndex: "reporterId",
          key: "reporterId",
          render: (text) => {
            return <Button type='link' onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</Button>
          }
        },
        {
          title: "接收方ID",
          dataIndex: "reporterPersonId",
          key: "reporterPersonId",
          render: (text) => {
            return <Button type='link' onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</Button>
          }
        },
        {
          title: '发送时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          render: (text, record) => {
            return <TheButton onClick={() => this.toContent(record)}>查询详情</TheButton>
          }
        },
      ],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "举报人",
          dataIndex: "reporterId",
          key: "reporterId",
          render: (text) => {
            return <Button type='link' onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</Button>
          }
        },
        {
          title: "被举报人",
          dataIndex: "reporterPersonId",
          key: "reporterPersonId",
          render: (text) => {
            return <Button type='link' onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</Button>
          }
        },
        {
          title: "举报图片",
          dataIndex: "urls",
          key: "urls",
          render: (text) => {
            return (
              <Space>
                {text && text.map((v) => {
                  return <TheImage src={v} key={v} width={80} height={80} />;
                })}
              </Space>
            );
          },
        },
        {
          title: "举报描述",
          dataIndex: "remark",
          key: "remark",
          render: (text) => {
            return <div style={{ width: '300px', whiteSpace: "normal" }}>
              {text}
            </div>
          }
        },
        {
          title: "举报原因",
          dataIndex: "reason",
          key: "reason",
        },
        {
          title: "举报人IP",
          dataIndex: "ipAddress",
          key: "ipAddress",
        },
        {
          title: "处理状态",
          dataIndex: "status",
          key: "status",
          render: (text) => {
            let label = ''
            switch (text) {
              case 0:
                label = '待处理'
                break;
              case 1:
                label = '已处理'
                break;
              case 2:
                label = '处理超时'
                break;
              default:
                break;
            }
            return label
          }
        },
        {
          title: "举报时间",
          dataIndex: "createTime",
          key: "createTime",
        },
      ],
      searchOptionWords: [
        { field: 'value', label: '敏感词内容', placeholder: '输入敏感词内容', type: 'Input', defaultValue: '' },
        { field: "time", label: "查询时间", placeholder: "", required: false, rules: [], type: "RangePicker", showTime: true, },
        { field: 'reporterId', label: '发送方ID', placeholder: '输入发送方ID', type: 'Input', defaultValue: '' },
      ],
      searchOption: [
        { field: 'reporterId', label: '举报人', placeholder: '输入举报人ID', type: 'Input', defaultValue: '' },
        { field: 'reporterPersonId', label: '被举报人', placeholder: '输入被举报人ID', type: 'Input', defaultValue: '' },
        { field: 'ipAddress', label: '举报人IP', placeholder: '输入举报人IP', type: 'Input', defaultValue: '' },
        { field: "time", label: "举报时间", placeholder: "", required: false, rules: [], type: "RangePicker", defaultValue: "", },
      ],
      tabValue: "0",
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      queryForm: {startTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") , endTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") },
      userName: store.getState().user.userName
    }
  }
  componentDidMount() {
    this.state.searchOptionWords[1].otherConfig = {defaultValue: [moment(new Date()), moment(new Date())]}
    let time = [moment(new Date()), moment(new Date())]
    this.getData({time})
  }

  getData = async (values) => {
    const { pageData, tabValue, queryForm } = this.state
    if (values && !_.isEmpty(values.time)) {
      values.startTime = moment(values.time[0]).format("YYYY-MM-DD HH:mm:ss");
      values.endTime = moment(values.time[1]).format("YYYY-MM-DD HH:mm:ss");
      delete (values.time)
    }
    this.setState({
      queryForm: values === undefined ? queryForm : { ...values }
    }, async () => {
      await apiSensitiveWordsPage({ ...pageData, ...queryForm, type: tabValue }).then((res) => {
        if (res.code === 0) {
          this.setState({
            dataSource: res.data,
            pageData: {
              pageNo: res.pageNo,
              pageSize: res.pageSize
            },
            total: res.totalCount,
          })
        }
      })
    })
  }
  //tab切换
  changeKey = (e) => {
    this.queryFormRef.formRef.resetFields()
    let queryForm = {}
    if(e == '0') {
      this.state.searchOptionWords[1].otherConfig = {defaultValue: [moment(new Date()), moment(new Date())]}
      queryForm = {startTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") , endTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") }
    }
    this.setState({
      tabValue: e,
      queryForm,
    }, () => {
      this.pageChange(1, 10)
    })
  }
  //分页
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  }
  //搜索
  onFormSearch(values) {
    const { queryForm } = this.state
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 },
      queryForm: Object.getOwnPropertyNames(values).length > 0 ? values : queryForm
    }, () => {
      this.getData(this.state.queryForm)
    })
  }
  //搜索重置
  onReset() {
    this.state.searchOptionWords[1].otherConfig = {defaultValue: ""}
    this.setState({ queryForm: {} }, () => {
      this.pageChange(1, 10)
    })
  }
  // 查询详情
  toContent = (data) => {
    this.props.history.push(`/sensitiveWords/details/${data.reporterId}/${data.reporterPersonId}`)
  }

  render() {
    const { columnsWords, columns, userName, dataSource, pageData: { pageNo, pageSize }, total, searchOptionWords, searchOption, tabValue } = this.state;
    const content = userName + "\n" + moment(new Date()).format("YYYY年MM月DD日 HH:mm:ss")
    return (<div className='p-layout-box'>
      <WaterMark content={content} rotate={-20} width={200} height={100} maxWidth={100} lineHeight={30} >
        <Tabs defaultActiveKey={tabValue} type='card' onChange={(v) => this.changeKey(v)} >
          <Tabs.TabPane key={"0"} tab='敏感词检测' >
            <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOptionWords} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
            <TheTable scroll={{ x: '', y: '63vh' }} columns={columnsWords} dataSource={dataSource} />
            <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
          </Tabs.TabPane>
          <Tabs.TabPane key={"1"} tab='举报' >
            <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
            <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} />
            <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
          </Tabs.TabPane>
        </Tabs>
      </WaterMark>
    </div>)
  }
}

export default SensitiveWords